<template>
	<view class="">
		<picker v-if="type=='vip'" :value="data.index" :range="item.fieldOption" @change="pickChange">
			<uv-form-item :label="item.fieldLabel" borderBottom>
				<uv-input :value="item.fieldOption[data.index] || data.value" disabled disabledColor="#ffffff"
					:placeholder="`请选择${item.fieldLabel}`" border="none">
				</uv-input>
				<template v-slot:right>
					<uv-icon name="arrow-down-fill" color="#2C2C2C" size="8"></uv-icon>
				</template>
			</uv-form-item>
		</picker>
		<picker v-else :value="data.index" :range="item.fieldOption" @change="pickChange">
			<uv-form-item :required="item.isRequired" :label="item.fieldLabel" class="sex-b">
				<uv-input :value="item.fieldOption[data.index] || data.value" disabled disabledColor="#ffffff"
					:placeholder="`请选择${item.fieldLabel}`">
				</uv-input>
				<template v-slot:right>
					<uv-icon class="arrow" name="arrow-down"></uv-icon>
				</template>
			</uv-form-item>
		</picker>
	</view>
</template>

<script setup>
	import {
		defineProps,
		ref,
		defineEmits,
		onMounted
	} from 'vue';
	const props = defineProps(['item', 'index', 'id', 'type']);
	const emit = defineEmits(['resValue']);
	const data = ref({
		index: '',
		value: ''
	})
	onMounted(() => {
		if (props.id) {
			data.value.value = props.item.resValue;
		}
	})
	const pickChange = (e) => {
		data.value.index = e.detail.value;
		data.value.value = '';
		emit('resValue', {
			index: props.index,
			value: props.item.fieldOption[data.value.index]
		});
	};
</script>

<style lang="scss">
	.form-box {
		padding: 32rpx 38rpx;

		.sex-b {
			position: relative;

			.arrow {
				position: absolute;
				right: 0;
			}
		}
	}
</style>